<template>
  <div class="blog">
    <div class="title-main">
      <el-link type="primary" :underline="false" class="title" @click="detailBlog">{{ data_form.title }}</el-link>
      <el-row class="user">
        <el-col :span="3">
          <detail-profile :id="data_form.user.userId" :user-name="data_form.user.userName">
            <i class="el-icon-user-solid" />
          </detail-profile>
        </el-col>
        <el-col :span="8"><i class="el-icon-date"> 最后编辑于 {{ data_form.updateDate }}</i></el-col>
        <el-col
          :span="4"
          class="like"
          @mouseover.native="likeHover = true"
          @mouseout.native="likeHover = false"
          @click.native="updateLike"
        >
          <img :src="likeSrc" class="likeImg"> <span> {{ data_form.like }}个赞</span>
        </el-col>
        <el-col :span="6">
          <el-link v-show="isShowView" :underline="false" icon="el-icon-view" @click="detailBlog">查看详情</el-link>
          <el-link v-show="isShowEdit" :underline="false" icon="el-icon-edit" @click="updateBlog">编辑</el-link>
        </el-col>
      </el-row>
    </div>
    <el-divider />
    <mavon-editor
      :value="getContext"
      :subfield="false"
      default-open="preview"
      :toolbars-flag="false"
      :box-shadow="false"
      :transition="false"
    />

  </div>
</template>

<script>
import { updateLike } from '@/networks/blog'
import DetailProfile from '@/components/detailProfile.vue'

export default {
  name: 'CommonBlog',
  components: { DetailProfile },
  props: {
    isShowView: {
      type: Boolean,
      default: false // 显示查看详情，默认不显示
    },
    isShowEdit: {
      type: Boolean,
      default: false // 显示编辑，默认不显示
    },
    isHidden: {
      type: Boolean,
      default: true
    },
    isLikeClick: {
      type: Boolean,
      default: false
    },
    form: { // 数据
      type: Object,
      default() {
        return {
          id: 1,
          userId: 3,
          isPublic: 1,
          content: '前端采用 Vue + elementUI， 后端用 spring boot， 数据库 mysql\n',
          like: 233,
          createDate: '2020-02-29 15:52',
          updateDate: '2020-02-29 15:52',
          title: '一个统计刷题和发布比赛、团队信息的系统',
          user: {
            userId: 3,
            userName: 'acm团队'
          }
        }
      }
    }
  },
  data() {
    return {
      likeHover: false,
      likeClick: this.isLikeClick,
      data_form: this.form
    }
  },
  computed: {
    getContext() { // 获取内容 + 是否省略
      if (!this.isHidden || this.form.content.length <= 300) return this.data_form.content
      return this.data_form.content.substr(0, 300) + '\n...'
    },
    likeSrc() { // 点赞图片 更换
      return (this.likeClick || this.likeHover) ? require('@/assets/img/dianzan2.png') : require('@/assets/img/dianzan1.png')
    }
  },
  methods: {
    detailBlog() { // 博客详情
      this.$router.push({
        path: '/detailBlog',
        query: { id: this.data_form.id }
      })
    },
    updateBlog() { // 去编辑博客
      this.$router.push({
        name: 'updateBlog',
        params: { form: this.data_form }
      })
    },
    updateLike() { // 更新点赞
      updateLike({
        blogId: this.data_form.id,
        isLike: this.likeClick ? 1 : 0
      }).then(res => {
        this.likeClick = !this.likeClick
        this.data_form.like += this.likeClick ? 1 : -1
        this.$store.commit('setRefreshLike', true)
      // eslint-disable-next-line handle-callback-err
      }).catch(err => {
        this.likeHover = false
      })
    }
  }
}
</script>

<style scoped>

  .blog {
    padding-top: 20px;
  }

  .title {
    color: #78136b;
    font-size: 26px;
    font-weight: bold;
  }

  .user {
    width: 800px;
    color: #7e7e7e;
    padding-top: 20px;
    font-size: 14px !important;
  }

  .title-main {
    padding: 0 30px;
  }

  .like {
    padding-left: 10px;
    cursor: pointer;
  }

  .likeImg {
    width: 14px;
    position: relative;
    top: 2px;
  }
 div /deep/ .v-note-wrapper {
   min-height: 0;
 }
</style>
